import { Button, Image, Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { MehOutlined } from '@ant-design/icons';
import dingTalkImageData from '../../data/dingTalkImageData';
import feishuImageData from '../../data/feishuImageData';
import neteaseImageData from '../../data/neteaseImageData';
import wechatImageData from '../../data/wechatImageData';
import { appTypes, getOptionLabel } from '../../data/statusData';

const getAppLogo = (appType: string) => {
  let logo: React.ReactNode = <MehOutlined style={{ fontSize: 16 }} />;
  switch (appType) {
    case 'Netease':
      logo = (
        <Image
          alt="Netease"
          src={neteaseImageData}
          preview={false}
          style={{
            width: 16,
            height: 16
          }}
        />
      );
      break;
    case 'Wechat':
      logo = (
        <Image
          alt="Wechat"
          src={wechatImageData}
          preview={false}
          style={{
            width: 16,
            height: 16
          }}
        />
      );
      break;
    case 'DingTalk': 
      logo = (
        <Image
          alt="DingTalk"
          src={dingTalkImageData}
          preview={false}
          style={{
            width: 16,
            height: 16
          }}
        />
      );
      break;
    case 'Feishu':
      logo = (
        <Image
          alt="Feishu"
          src={feishuImageData}
          preview={false}
          style={{
            width: 16,
            height: 16
          }}
        />
      );
      break;
  }
  return logo;
};

const columns = (onRowNumberClick: (record: any) => void) => {
  const columns: ColumnsType<any> = [
    {
      title: '#',
      dataIndex: 'id',
      key: '__row_number',
      align: 'right',
      width: 48,
      render: (text, record, index) => {
        return (
          <Button
            type="link"
            style={{ padding: 0 }}
            onClick={() => onRowNumberClick(record)}
          >
            <em>{index + 1}</em>
          </Button>
        );
      }
    },
    {
      title: '应用类型',
      dataIndex: 'appType',
      key: 'appType',
      render: (text, record, index) => {
        return (
          <Space size={5}>
            {getAppLogo(text)}
            {getOptionLabel(appTypes, text)}
          </Space>
        );
      }
    },
    {
      title: '数据',
      dataIndex: 'data',
      key: 'data'
    }
  ];
  return columns;
};

export default columns;
